<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图层属性</title>
    <style>
        .layerpanel {
            width: 350px;
            /*top: 30px;*/
        }

        /*.tab-container {*/
        /*    min-height: 400px;*/
        /*    max-height: 500px;*/
        /*    !*overflow-y: auto;*!*/
        /*    !*overflow-x: hidden;*!*/
        /*}*/

        .m-colorPicker {
            position: relative;
            text-align: left;
            font-size: 14px;
            display: inline-block;
            z-index: 99;
        }


        .layui-form-item {
            width: 313px!important;
            border: 1px #fff solid;
            margin-bottom: 0px !important;
            border-bottom: none;
        }

        .layui-input {
            background-color: #fff !important;
            height: 30px!important;
            margin-top: 5px;
        }

        .layui-form-label {
            width: 100px!important;
            padding: 11px 15px!important;
            border-right: 1px #fff solid;
            font-weight: bold !important;
            font-size: 14px;
            text-align: center!important;
        }

        .layui-input-block {
            width: 150px!important;
            margin-left: 150px!important;
        }

        .mCSB_container {
            margin-right: 17px!important;
        }

        legend {
            text-align: center;
            font-size: 16px!important;
            font-weight: bold!important;
            margin-bottom: 15px;
            margin-top: 20px;
        }

        .layui-this {
            color: rgb(27, 83, 140)!important;
            font-weight: bold!important;
            font-size: 16px!important;
        }

        .layui-tab-title .layui-this:after {
            border-bottom: 2px solid rgb(27, 83, 140)!important;
        }

        .layui-tab-content {
            padding: 0 !important;
        }

        .propDisabled .layui-colorpicker-main {
            display: none!important;
        }
    </style>
    <script src="../../js/plugin/jquery-2.0.3.js"></script>
    <script src="../../node_modules/layui/layui.js"></script>
    <script src="../../node_modules/loadsh/lodash.min.js"></script>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../js/html/eventName.js"></script>
    <link rel="stylesheet" href="../../css/html/layers/layers.css" />
    <link rel="stylesheet" href="../../node_modules/layui/css/layui.css">
    <link rel="stylesheet" href="../../node_modules/Scrollbar/jquery.mCustomScrollbar.css" />
</head>

<body>
    <div id="app" class="select-layer-container" style="margin-left: 10px">
        <legend>图层类型</legend>
        <!--样式及属性-->
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="text" name="lxxp" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                </div>
            </div>
            <legend>外观</legend>
            <!--属性不可编辑-->
            <div class="propDisabled">
                <!--矢量面-->
                <div class="polygonLayer" id="polygonLayer" style="display: none">
                    <div class="layui-form-item" style="height: 40px;">
                        <!--<label class="layui-form-label">材质</label>-->
                        <label class="layui-form-label">填充色</label>
                        <div class="layui-input-block ">
                            <div class="colorchk" id="colorchk-point" style="display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 40px;">
                        <!--  <label class="layui-form-label">材质</label>-->
                        <label class="layui-form-label">边框色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-point2" style="display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">边框宽度</label>
                        <div class="layui-input-block">
                            <input type="text" name="polygonOutlineWidth" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度</label>
                        <div class="layui-input-block">
                            <input type="text" name="polygonHeight" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度类型</label>
                        <div class="layui-input-block" style="width: 200px;">
                            <select name="polygonHeightReference" id="layerpoint" lay-filter="layerkind">
                                <option value="0">无</option>
                                <option value="1">贴地表</option>
                                <option value="2">相对地表</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">拉伸高度</label>
                        <div class="layui-input-block">
                            <input type="text" name="polygonExtrudedHeight" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">拉伸高度类型</label>
                        <div class="layui-input-block" style="width: 200px;">
                            <select name="polygonExtrudedHeightReferenccolorchke" id="layerpoint2" lay-filter="layerkind">
                                <option value="0">无</option>
                                <option value="1">贴地表</option>
                                <option value="2">相对地表</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="polygonDistanceDisplayMaxCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">最小可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="polygonDistanceDisplayMinCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                </div>
                <!--矢量线-->
                <div class="polylineLayer" id="polylineLayer" style="display: none">
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">填充色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-line" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">线型</label>
                        <div class="layui-input-block">
                            <input type="text" name="polylinemArcType" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">线宽</label>
                        <div class="layui-input-block">
                            <input type="text" name="polylineWidth" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="polylineDistanceDisplayMaxCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">最小可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="polylineDistanceDisplayMinCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                </div>
                <!--polylineVolume-->
                <div class="polylineVolume" id="polylineVolume" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="text" name="polylineVolumeshow" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">边框宽度</label>
                        <div class="layui-input-block">
                            <input type="text" name="polylineVolumeoutlineWidth" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">阴影设置</label>
                        <div class="layui-input-block">
                            <input type="text" name="3dtilesetshadows" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                </div>
                <!--点-->
                <div class="pointLayer" id="pointLayer" style="display: none">
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">颜色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-pointColor" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">边框颜色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-pointOutlineColor" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">边框宽度</label>
                        <div class="layui-input-block">
                            <input type="text" name="pointOutlineWidth" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度</label>
                        <div class="layui-input-block">
                            <input type="text" name="pointHeight" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">比例</label>
                        <div class="layui-input-block">
                            <input type="text" name="pointPixelSize" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度类型</label>
                        <div class="layui-input-block" style="width: 200px;">
                            <select name="pointHeightReference" id="layercircular" lay-filter="layerkind">
                                <option value="="></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="pointDistanceDisplayMaxCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">最小可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="pointDistanceDisplayMinCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                </div>
                <!--labelLayer-->
                <div class="labelLayer" id="labelLayer" style="display: none">
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">文本颜色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-labelFillColor" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">文本边框颜色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-labelOutlineColor" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">文本边框宽度</label>
                        <div class="layui-input-block">
                            <input type="text" name="labelOutlineWidth" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">文本大小</label>
                        <div class="layui-input-block">
                            <input type="text" name="labelFontSize" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">背景色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-labelBackgroundColor" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度</label>
                        <div class="layui-input-block">
                            <input type="text" name="labelHeight" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度类型</label>
                        <div class="layui-input-block" style="width: 200px;">
                            <select name="heightReference" id="layerlabel5" lay-filter="layerkind">
                                <option value="0">无</option>
                                <option value="1">贴地表</option>
                                <option value="2">相对地表</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="labelDistanceDisplayMaxCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">最小可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="labelDistanceDisplayMinCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--billboard-->
                <div class="billboard" id="billboard" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="upload-billboard">上传图片</button>
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">颜色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-billboard" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">比例</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">宽度</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度类型</label>
                        <div class="layui-input-block" style="width: 200px;">
                            <select name="func1" id="layerbillboard" lay-filter="layerkind">
                                <option value="="></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">最小可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--model样式及属性-->
                <div class="modelLayer" id="modelLayer" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">模型路径</label>
                        <div class="layui-input-block">
                            <input type="text" name="Modelpath" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模型比例</label>
                        <div class="layui-input-block">
                            <input type="text" name="Modelproportion" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">颜色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-model" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="height: 40px;">
                        <label class="layui-form-label">光亮颜色</label>
                        <div class="layui-input-block">
                            <div class="colorchk" id="colorchk-model2" style="margin-left: 30px; display: inline-block;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度</label>
                        <div class="layui-input-block">
                            <input type="text" name="Modelheight" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高度类型</label>
                        <div class="layui-input-block" style="width: 200px;">
                            <select name="modelExtrudedHeight" id="layermodel" lay-filter="layerkind">
                                <option value="0">无</option>
                                <option value="1">贴地表</option>
                                <option value="2">相对地表</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="Modelmax" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">最小可视距离</label>
                        <div class="layui-input-block">
                            <input type="text" name="Modelmin" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                </div>
                <!--3DTileset样式及属性-->
                <div class="3DTileset" id="3DTileset" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">url地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="3dtileseturl" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="text" name="3dtilesetshow" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">阴影设置</label>
                        <div class="layui-input-block">
                            <input type="text" name="3dtilesetshadows" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
<!--                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">平移（x轴）</label>
                        <div class="layui-input-block">
                            <input id="3dtilesetmoveX" type="text" name="3dtilesetmoveX" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input abled" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">平移（y轴）</label>
                        <div class="layui-input-block">
                            <input  id="3dtilesetmoveY" type="text" name="3dtilesetmoveY" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input abled" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                        <label class="layui-form-label">平移（z轴）</label>
                        <div class="layui-input-block">
                            <input  id="3dtilesetmoveZ" type="text" name="3dtilesetmoveZ" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input abled" />
                        </div>
                    </div>
                    <div class="layui-form-item" style="border-bottom: 1px #fff solid;">
                        <label class="layui-form-label">旋转角度</label>
                        <div class="layui-input-block">
                            <input  id="3dtilesetspin" type="text" name="3dtilesetspin" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input abled" />
                        </div>
                    </div>-->
                </div>
                <!--IamgeLayer样式及属性-->
                <div class="ImageryProvider" id="ImageryProvider" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">url地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="Iamgeurl" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="text" name="Iamgeshow" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                        </div>
                    </div>
                </div>
            </div>
            <!--街景-->
            <div class="Streetscape" id="Streetscape" style="display: none">
                <div class="layui-form-item" style="height: 40px;">
                    <label class="layui-form-label">颜色</label>
                    <div class="layui-input-block">
                        <div class="colorchk" id="colorchk-jj" style="margin-left: 30px; display: inline-block;"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">线型</label>
                    <div class="layui-input-block">
                        <input type="text" id="linelx" name="streetscapeArcType" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" style="position: relative; border-bottom: 1px #fff solid">
                    <label class="layui-form-label">街景透明度</label>
                    <div class="layui-input-block" style="position: absolute; top: 16px;">
                        <div id="opacity-streetscape" class="demo-slider"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">线宽</label>
                    <div class="layui-input-block">
                        <input type="text" id="lineWidth" name="streetscapeWidth" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最大可视距离</label>
                    <div class="layui-input-block">
                        <input type="text" id="polylineMaxView" name="streetscapeDistanceDisplayMaxCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" style="border-bottom: 1px #fff solid">
                    <label class="layui-form-label">最小可视距离</label>
                    <div class="layui-input-block">
                        <input type="text" id="polylineMinView" name="streetscapeDistanceDisplayMinCondition" lay-verify="title" autocomplete="off" placeholder="0" class="layui-input" />
                    </div>
                </div>
            </div>
            <!--街景-->
            <div class="Streetscapes" id="Streetscapes" style="display: none">
                <div class="layui-form-item" style="position: relative; border-bottom: 1px #fff solid">
                    <label class="layui-form-label">街景透明度</label>
                    <div class="layui-input-block" style="position: absolute; top: 16px;">
                        <div id="opacity-streetscapes" class="demo-slider"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="../../node_modules/Scrollbar/jquery.mCustomScrollbar.js"></script>
    <script src="../../js/html/scrollbarStart.js"></script>
    <script src="../../js/Layers/propLayer.js"></script>
    <script>
    </script>
</body>

</html>
